<template>
  <div :hidden="boardHidden" :style="{ top: position.y + 'px', left: position.x + 'px' }"
       @mousedown="startDrag"
       @mousemove="drag"
       @mouseup="stopDrag">
    <div class="accordion shadow-div">
      <div style="background-color: #2196f3;overflow: hidden;" class="accordion-header" @click="toggleAccordion">
        <span style="float: left">请您留言</span>
        <span style="float: right" v-if="isExpanded"><i class="el-icon-arrow-down"></i></span>
        <span style="float: right" v-else><i class="el-icon-arrow-left"></i></span>
      </div>
      <div class="accordion-content" :class="{ 'expanded': isExpanded }">
        <slot>
          <div>
            <div style="background-color: #ffffff;color: black;">
              <div style="font-size: 14px;padding: 10px">哈工科讯（沈阳）物流装备有限公司 17603629308</div>
              <!--表单-->
              <div :hidden="!hideen" style="padding: 10px">
                <el-form ref="form" :rules="rules" :model="form" label-width="80px" label-position="top">
                  <el-form-item prop="remark">
                    <el-input type="textarea" v-model="form.remark" placeholder="请在此输入留言内容，我们会尽快与您联系。（必填）"></el-input>
                  </el-form-item>
                  <el-form-item label-position="left" prop="name">
                    <el-input v-model="form.name" placeholder="姓名（必填）" ></el-input>
                  </el-form-item>
                  <el-form-item prop="phone">
                    <el-input v-model="form.phone" placeholder="电话（必填）"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button style="float: right" type="primary" size="mini" @click="onSubmit">提交</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div :hidden="hideen" class="div-hidden" :style="'color:'+(resForm.type=='success'?'green':'red')">
                <h1><i :class="`el-icon-`+resForm.type"></i></h1>
                <h1>{{resForm.message}}</h1>
              </div>
            </div>
          </div>
        </slot>
      </div>
    </div>

  </div>
</template>
<!--留言板-->
<script>
  import { saveMessageBoard } from "../api"
    export default {
        name: "MessageBoard",
        data() {
            return {
                hideen:true,
                isDragging: false,
                initialX: 0,
                initialY: 0,
                offsetX: 0,
                offsetY: 0,
                position: { x: 10, y: 300 },
                form:{
                    name:"",
                    phone:"",
                    remark:"",
                    dataTime:null
                },
                //折叠面板使用
                isExpanded: true,
                rules: {
                    name: [
                        { required: true,message: '请输入姓名' }
                    ],
                    phone: [
                        { required: true,message: '请输入电话' , trigger: 'blur' },
                        { pattern: /^1[3456789]\d{9}$/ , message: '请输入正确的电话', trigger: ['blur', 'change'] }
                    ],
                    remark: [
                        { required: true,message: '请输入留言内容不能为空' }
                    ]
                },
                resForm:{
                    message:null,
                    type:null,
                    code:null
                },
                boardHidden:false,
            };
        },
        watch: {
            '$route':'isBoardHidden'
        },
        methods: {
            onSubmit(){
                this.$refs.form.validate((valid)=>{
                    if (valid){
                        console.log(valid,"表单提交");
                        console.log(this.form);

                        saveMessageBoard(this.form).then(({data}) =>{
                            /*this.$message({
                                message: data.message,
                                type: data.type
                            });*/
                            this.resForm=data;
                            this.hideen=false;
                        });
                        this.$refs.form.resetFields();
                    }else{
                        console.log(valid,"校验不通过");
                    }
                });
            },
            toggleAccordion() {
                this.isExpanded = !this.isExpanded;
            },
            startDrag(event) {
                this.isDragging = true;
                this.initialX = event.clientX;
                this.initialY = event.clientY;
                this.offsetX = this.position.x;
                this.offsetY = this.position.y;
                document.addEventListener('mousemove', this.drag);
                document.addEventListener('mouseup', this.stopDrag);
            },
            drag(event) {
                if (this.isDragging) {
                    const deltaX = event.clientX - this.initialX;
                    const deltaY = event.clientY - this.initialY;
                    this.position.x = this.offsetX + deltaX;
                    this.position.y = this.offsetY + deltaY;
                }
            },
            stopDrag() {
                this.isDragging = false;
                document.removeEventListener('mousemove', this.drag);
                document.removeEventListener('mouseup', this.stopDrag);
            },
            //设置默认的头
            isBoardHidden(){
                var url=window.location.href;
                var str=url.split("/")[url.split("/").length-1];
                if (str=='markdown'){
                    this.boardHidden=true;
                }else{
                    this.boardHidden=false;
                }
            }
        },
        mounted() {
            this.isBoardHidden();
        }
    }
</script>

<style scoped>
  .shadow-div{
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  }
  .accordion {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
    border-radius: 10px 10px 10px 10px;
  }

  .accordion-header {
    background-color: #f5f5f5;
    padding: 10px;
    /*display: flex;*/
    align-items: center;
    /*justify-content: center;*/
    cursor: pointer;
    border-radius: 10px 10px 0 0;
  }

  .accordion-content {
    display: none;
    overflow: hidden;
    transition: height 0.3s;
  }
  .div-hidden{
    text-align: center;
    font-size: 30px;
  }
  .expanded {
    display: block;
  }
</style>
